<template>
	<div class="holiday">
		<div class="title">节假日管理</div>
		<div class="addAndSearch">
			<Form :model="holidayMsg" label-position="right" :label-width="100" inline >
		        <Row>
		        	<Col span="8">
    		        	<FormItem label="节假日">
    			            <Input v-model="holidayMsg.name"></Input>
    			        </FormItem>
		        	</Col>
			        <Col span="8">
			        	<FormItem label="放假时间">
			        	     <DatePicker type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px" v-model="holidayMsg.times"></DatePicker>
			        	</FormItem>
			        </Col>
			        <Col span="8">
			        	<FormItem>
			        	    <Button type="success">添加</Button>
			        	    <Button type="info">筛选</Button>
			        	</FormItem>
			        </Col>
		        </Row>
		    </Form>
		</div>
		<div>
	        <Table border ref="selection" :columns="columns" :data="lists" class="holiday-table"></Table>
	    </div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				holidayMsg: [],
				columns: [
					 {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
					{
						title: '节假日',
						key: 'holidayName'
					},
					{
						title: '日期范围',
						key: 'times'
					},
					{
						title: '操作',
						key: 'handle',
						width: 150,
	                    align: 'center',
	                    render: (h, params) => {
	                        return h('div', [
	                            h('Button', {
	                                props: {
	                                    type: 'primary',
	                                    size: 'small',
	                                    icon: 'edit'
	                                },
	                                style: {
	                                    marginRight: '5px',
	                                    fontSize: '16px',
	                                    width: '40px'
	                                },
	                                on: {
	                                    click: () => {
	                                        this.show(params.index)
	                                    }
	                                }
	                            }),
	                            h('Button', {
	                                props: {
	                                    type: 'error',
	                                    size: 'small',
	                                    icon: 'trash-a'
	                                },
	                                style: {
	                                    fontSize: '16px',
	                                    width: '40px'
	                                },
	                                on: {
	                                    click: () => {
	                                        this.remove(params.index)
	                                    }
	                                }
	                            })
	                        ]);
	                    }
					}
				],
				lists: [
					{
						holidayName: '国庆节',
						times: '2018-10-01 - 2018-10-07'
					},
					{
						holidayName: '端午节',
						times: '2018-06-16 - 2018-06-18'
					},
				]
			}
		},
		methods: {
			handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.lists[index].name}<br>Age：${this.lists[index].age}<br>Address：${this.lists[index].address}`
                })
            },
            remove (index) {
                this.lists.splice(index, 1);
            }

		}
	}
</script>

<style lang="less" scoped>
.holiday {
	.title {
		font-weight: 500;
		height: 60px;
		line-height: 40px;
		font-size: 20px;
		padding: 20px 0 0 20px;
		border-bottom: 1px solid #ccc;
	}
	.addAndSearch {
		margin: 60px 0;
	}
	.holiday-table {
		margin: 0 100px;
	}
}
</style>